{# empty Twig template #}


    <link rel="stylesheet" href="{{ asset('bootstrap/css/smoothness/jquery-ui-1.10.3.custom.min.css') }}" />
    <style>
        body {}
        #wrap {}
        #external-events {
                float: left;
                padding: 10px 10px 10px 10px;
                /*border: 1px solid #ccc;
                background: #eee;*/
                text-align: left;
                }
        #external-events h4 {
                font-size: 16px;
                margin-top: 0;
                padding-top: 1em;
                }
        .external-event { /* try to mimick the look of a real event */
                margin: 10px 0;
                padding: 2px 4px;
                background: #3366CC;
                color: #fff;
                font-size: .85em;
                cursor: pointer;
                }
        #external-events p {
                margin: 1.5em 0;
                font-size: 11px;
                color: #666;
                }
        #external-events p input {
                margin: 0;
                vertical-align: middle;
                }

    </style>

{% block javascriptsHeader %}
    <script src="{{ asset('bootstrap/js/jquery-1.9.1.js') }}"></script>
    <script src="{{ asset('bootstrap/js/jquery-ui-1.10.3.custom.min.js') }}"></script>
    <script src="{{ asset('bootstrap/js/fullcalendar.min.js') }}"></script>
    <script type="text/javascript">
        $(document).ready(function(){
            
                       
            /* initialize the external events
            -----------------------------------------------------------------*/
            $('#external-events div.external-event').each(function() {

                // create an Event Object (http://arshaw.com/fullcalendar/docs/event_data/Event_Object/)
                // it doesn't need to have a start or end
                var eventObject = {
                        title: $.trim($(this).text()) // use the element's text as the event title
                };

                // store the Event Object in the DOM element so we can get to it later
                $(this).data('eventObject', eventObject);

                // make the event draggable using jQuery UI
                $(this).draggable({
                        zIndex: 999,
                        revert: true,      // will cause the event to go back to its
                        revertDuration: 0  //  original position after the drag
                });

            });


            /* initialize the calendar
            -----------------------------------------------------------------*/

            $('#calendar').fullCalendar({

                header: {
                        left: 'prev,next today',
                        center: 'title',
                        right: 'month'
                },
                monthNames:['Enero','Febrero','Marzo','Abril','Mayo','Junio','Julio','Agosto','Septiembre',
                            'Octubre','Noviembre','Diciembre'],
                monthNamesShort:['Ene','Feb','Mar','Abr','May','Jun','Jul','Ago','Sep','Oct','Nov','Dic'],
                dayNames:['Domingo','Lunes','Martes','Miércoles','Jueves','Viernes','Sábado'],
                dayNamesShort: ['Dom', 'Lun', 'Mar', 'Mié', 'Jue', 'Vie', 'Sáb'],
                titleFormat:{
                    day: 'dddd, d MMM, yyyy'
                },
                buttonText: {
                    prev:     '&lsaquo;', // <
                    next:     '&rsaquo;', // >
                    prevYear: '&laquo;',  // <<
                    nextYear: '&raquo;',  // >>
                    today:    'hoy',
                    month:    'mes',
                    week:     'semana',
                    day:      'día'
                },
                editable: true,
                droppable: true, // this allows things to be dropped onto the calendar !!!
                events: "{{ path('admin_calendario_jsondata') }}",
                
                //  Agregar evento mediante Drop & Drag
                drop: function(date, allDay) { // this function is called when something is dropped

                    // retrieve the dropped element's stored Event Object
                    var originalEventObject = $(this).data('eventObject');

                    // we need to copy it, so that multiple events don't have a reference to the same object
                    var copiedEventObject = $.extend({}, originalEventObject);

                    // assign it the date that was reported
                    copiedEventObject.start = Date.parse(date) / 1000;
                    copiedEventObject.allDay = allDay;

                    // save to db
                    var dataString = 'title='+ copiedEventObject.title +'&date_start='+copiedEventObject.start;
                    $.ajax({
                            type:"POST",
                            url:"{{path('admin_calendario_addEvent')}}",
                            data: dataString,
                            dataType: 'json',
                            success:function(result){
                                // recupero los datos del objeto con: result.event[0].id, y lo paso para dibujar
                                result.event[0]._id = result.event[0].id;
                                // the last `true` argument determines if the event "sticks" 
                                $('#calendar').fullCalendar('renderEvent', result.event[0], true);
                            }
                    });

                    // is the "remove after drop" checkbox checked?
                    if ($('#drop-remove').is(':checked')) {
                            // if so, remove the element from the "Draggable Events" list
                            $(this).remove();
                    }

                },
                   
                //  Editar evento que ya existe mediante Drop & Drag
                eventDrop: function(event, delta) {

                    var startdate = Date.parse(event.start) / 1000;
                    if(event.end === null) {
                        var enddate = startdate;
                    } else {
                        var enddate = Date.parse(event.end) / 1000;
                    }

                    event.allDay = event.allDay ? 1 : 0;

	            // opslaan in db
                    var dataString = 'id='+event.id+'&title='+event.title+'&start='+startdate+'&end='+enddate;
	            $.ajax({
                        type:"POST",
                        url:"{{path('admin_calendario_updateEvent')}}",
                        data: dataString
                    });
	        },
                eventClick: function(event, element) {
                    $('#calendar').fullCalendar('updateEvent', event);
                },
                           
                //  Eliminar evento mediante imagen que aparece en el evento
                eventMouseover: function(event, element){
                    if(event.editable) {
                        /*
                        *	SHOW DELETE ICON, ALSO POSSIBLE TO SHOW AN EDIT ICON HERE
                        */
                        var layer =	'<div id="events-layer" class="fc-transparent" style="position:absolute; width:100%; height:100%; top:-1px; text-align:right; z-index:100">'
                                               + '<a><img src="{{ asset('bootstrap/img/delete.png') }}" title="delete" width="14" id="delbut'+event.id+'" border="0" style="padding-right:5px; padding-top:2px;" /></a>'
                                               + '</div>';

                        $(this).append(layer);
                        $("#delbut"+event.id).hide();
                        $("#delbut"+event.id).fadeIn(200);
                        $("#delbut"+event.id).click(function() {
                            if(event.id) {
                                // opslaan in db
                                var dataString = 'id='+ event.id ;
                                $.ajax({
                                    type:"POST",
                                    url:"{{path('admin_calendario_deleteEvent')}}",
                                    data: dataString,
                                    success:function(html){}
                                });
                                $('#calendar').fullCalendar('removeEvents', event.id);
                            }
                        });
                    }
                },
                eventMouseout: function(calEvent, domEvent) {
                    $("#events-layer").remove();
                }
            });

        });
    </script>
{% endblock %}

    {% block body %}
    
    <div class="span3">
        <div class="row-fluid">
            <div class="span12">
                <div class="mini-layout">
                    <div class="mini-layout-header">
                        <i class="icon-pushpin"></i>
                        <span>Rutinas</span>
                    </div>
                    <div class="mini-layout-body">
                        <div id='external-events'>                             
                        {% for rutina in rutinas %}
                            <div class='external-event'>{{ rutina.id }}- {{ rutina.nombre }}</div>
                        {% endfor %}
                            <p><input type='checkbox' id='drop-remove' disabled="disabled"/> <label for='drop-remove'>Remover luego de arrastrar</label></p>
                         </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="row-fluid">
            <div class="span12">
                <p class="muted">"Recordar que la asignación, de Paquetes de Rutinas, se realizan los últimos días de cada Mes".</p>
            </div>
        </div>
    </div>
    <div class="span8">
        <div class="mini-layout">
            <div class="mini-layout-header">
                <i class="icon-calendar"></i>
                <span>Calendario</span>
            </div>
            <div class="mini-layout-body">
                <div id='calendar' class="calendar"></div>
                <div style='clear:both'></div>
            </div>
        </div>
        <div><br/></div>
    </div>

    {% endblock %}
